import Taro, { Component } from "@tarojs/taro";
import { AtCard, AtTimeline, AtAccordion, AtButton } from "taro-ui";
import {View} from '@tarojs/components'

import ReusePlan from "../ReusePlan/reusePlan";

class PlanAccordion extends Component {
  static defaultProps = {
    v: {
      executeDay: "",
      planName: "",
      timeStamp: "",
      missions: []
    }
  };
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      reuse: false
    };
  }

  onChangeReuse = () => {
    this.setState(prevState => {
      return {
        reuse: !prevState.reuse
      };
    });
  };
  // onFinishedReuse=()=>{
  //   this.setState({
  //     reuse:false
  //   })
  // }
  render() {
    let v = this.props.v;
    return (
      <AtAccordion
        open={this.state.open}
        title={`${v.executeDay} [ ${v.planName} ]`}
        onClick={value => {
          this.setState({ open: value });
        }}
      >
        <AtCard
          title={v.planName}
          note={`制定于${v.timeStamp}`}
          extra={v.executeDay}
        >
          <AtTimeline
            items={v.missions.map(m => ({
              title: m.missionName,
              content: [
                `${m.startTime} ~ ${m.endTime}`,
                ...m.missionDetails.split("\n")
              ],
              icon: "clock"
            }))}
          />
          {this.state.reuse ? (
            <View>
              <ReusePlan planToReuse={v} />
              <AtButton full type='secondary' onClick={this.onChangeReuse}>
                取消
              </AtButton>
            </View>
          ) : (
            <AtButton full type='secondary' onClick={this.onChangeReuse}>
              复用计划
            </AtButton>
          )}
        </AtCard>
      </AtAccordion>
    );
  }
}

export default PlanAccordion;
